<template>
	<view class="page">
		<view class="page-ctx">
			<view class="product-info">
				<view class="product-item flex">
					<view class="poster-box">
						<image :src="product.image" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title-box">
							<view class="title">
								{{product.title}}
							</view>
						</view>
						<view class="desc-box">
							<view class="desc ellipsis-1">
								{{product.remark || ''}}
							</view>
						</view>
						<view class="desc-box">
							<view class="desc ellipsis-1">
								{{product.keyVals }}
							</view>
						</view>

						<view class="price-box flex-between">
							<view class="price-info">
								<text class="huobi">￥</text>
								<text class="price">{{product.priceSale || 0}}</text>
								<text class="unit" v-if="product.unit">/{{product.unit}}</text>
							</view>
							<text class="num">x {{product.num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="type-info">
				<view class="main-title">
					请选择售后类型：
				</view>
				<view class="type-list flex">
					<view class="type-item flex-center" v-for="(item,index) in typeList" :key="index" @click="toRefundType(item)">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				inventoryId: '',
				product: {},
				//退换货类型(1-退款 2-退货退款 3-换货)
				typeList: [{
					title: '仅退款',
					value: 1,
					path: '/refund-submit', //refund-for-money
				}, {
					title: '退货退款',
					value: 2,
					path: '/refund-submit', //refund-for-return
				}, {
					title: '换货',
					value: 3,
					path: '/refund-submit' //refund-for-return
				}],

			};
		},



		onLoad(option) {
			this.orderId = option.orderId
			this.inventoryId = option.inventoryId
			this.setView()
		},
		methods: {
			setView() {
				this.query_order();
			},
			query_order() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_detail',
						id: this.orderId
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.product = data.products.find(v => v.id == this.inventoryId)
					}
				})
			},

			toRefundType(item) {
				this.toRoute({
					// mode: 'redirectTo',
					path: item.path,
					query: {
						orderId: this.orderId,
						inventoryId: this.inventoryId,
						type: item.value,
						title: item.title,
						// productId: this.product.productId,
						// buyNumber: this.product.num,
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.page-ctx {
			padding: 24rpx 32rpx;
		}
	}

	.product-info {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.product-item {
		padding: 40rpx 24rpx;

		&+.product-item {
			border-top: 1rpx solid #eee;
		}

		.poster-box {
			width: 176rpx;
			height: 176rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			flex: 1;
			overflow: hidden;
			padding-left: 32rpx;

			.title-box {}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				line-height: 1.5;
			}

			.desc-box {
				margin-top: 14rpx;

				.desc {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #B3B9C9;
				}
			}


			.price-box {
				margin-top: 24rpx;

				.price-info {
					.huobi {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.price {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.unit {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
						color: #000000;
					}
				}

				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

			}
		}
	}


	.type-info {
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx 24rpx;

		.main-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.type-list {
			margin-top: 26rpx;

			.type-item {
				flex: 1;
				height: 72rpx;
				background: #F8F8F8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;

				&+.type-item {
					margin-left: 16rpx;
				}
			}
		}
	}
</style>